<template>
  <div
    class="item-box listItem"
    v-for="(item, index) in tableData"
    :key="index"
    :chooseIndex="index"
  >
    <div class="item1" :style="{ flex: props['flexList'][0] }">
      <!-- <el-tooltip
          class="box-item"
          effect="dark"
          :content="item.warnName"
          placement="top"
        >
          <div class="text">
            {{item.warnName}}
          </div>
        </el-tooltip> -->
      <div class="text">
        {{ item.warningName }}
      </div>
    </div>

    <div class="item2" :style="{ flex: props['flexList'][1] }">
      {{ item.bizTypeName }}
    </div>
    <div class="item3" :style="{ flex: props['flexList'][2] }">
      {{ item.ieportName }}
    </div>
    <div class="item4" :style="{ flex: props['flexList'][3] }">
      <div class="value" v-if="props.tableType === 1">
        {{ item.warningCount }}
      </div>
      <div class="value" v-if="props.tableType === 2">
        {{ item.entryId }}
      </div>
      <img
        src="@/assets/imgs/icon-danger-V2.png"
        alt=""
        v-if="item.warningLevel === 'RED'"
      />
      <img
        src="@/assets/imgs/icon-warning-V2.png"
        alt=""
        v-if="item.warningLevel === 'YELLOW'"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  flexList: {
    type: Array,
    default: [],
  },
  tableData: {
    type: Array,
    default: [],
  },
  tableType: {
    type: Number,
    default: 1,
  },
});
</script>

<style scoped lang="scss">
.item-box {
  display: flex;
  height: 36px;
  border-bottom: 1px solid #ebebeb;
  .item1,
  .item2,
  .item3,
  .item4 {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    // padding: 0 12px;
    // box-sizing: border-box;
    font-weight: 400;
    font-size: 13px;
    color: #333333;
    overflow: hidden;

    .text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .item1 {
    position: relative;
    padding: 0 12px;
    box-sizing: border-box;
  }
  .item4 {
    img {
      width: 12px;
      height: 12px;
      margin-left: 3px;
    }
  }
}
</style>
